<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/10/10
  Time: 15:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>盘点审核页面</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <%--    刷新按钮--%>
    <el-button type="success" @click="inittable" size="small">刷新</el-button>

    <%--    主表格--%>
    <el-table
            :data="tableDate"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
        >
        </el-table-column>
        <el-table-column
                prop="invenid"
                label="盘点编号"
        ></el-table-column>
        <el-table-column
                prop="invenstaffname"
                label="盘点员"
                width="200"
        ></el-table-column>
        <el-table-column
                prop="inventime"
                label="盘点时间"
        ></el-table-column>
        <el-table-column
                prop="state"
                label="审核状态"
        >
            <template slot-scope="scope">
                <el-tag
                        type="warning"
                        v-if="scope.row.state==1"
                        effect="dark">
                    待审核
                </el-tag>
                <el-tag
                        type="success"
                        v-if="scope.row.state==2"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="danger"
                        v-if="scope.row.state==3"
                        effect="dark">
                    审核不通过
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="所属分店"
        ></el-table-column>
        <el-table-column
                prop="branchid"
                label="所属分店编号"
        ></el-table-column>
        <el-table-column
                label="详情"
        >
            <template slot-scope="scope">
                <el-button type="primary" @click="code(scope.row.invenid)">详情信息</el-button>
            </template>
        </el-table-column>
        <el-table-column
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button type="success" v-if="scope.row.state==1" @click="pass(scope.row)">通过</el-button>
                <el-button type="danger" v-if="scope.row.state==1" @click="reject(scope.row)">驳回</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--    分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 15]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--        详情信息--%>
    <el-dialog
            title="详情信息"
            :visible.sync="dialogVisible1"
            width="50%"
    >
        <template>
            <el-table
                    :data="tableData1"
                    style="width: 100%">
                <el-table-column
                        prop="lid"
                        label="报损详情ID"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsname"
                        label="商品名"
                >
                </el-table-column>
                <el-table-column
                        prop="invennum"
                        label="盘点数量"
                >
                </el-table-column>
                <el-table-column
                        prop="lossnum"
                        label="报损数量"
                >
                </el-table-column>
            </el-table>
            <%--    分页--%>
            <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="currentPage"
                    :page-sizes="[1, 5, 10, 15]"
                    :page-size=pageSize
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total1">
            </el-pagination>
        </template>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <%-- 驳回理由 --%>
    <el-dialog
            title="驳回理由"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="form" label-width="80px">
            <el-input v-model="form.remarks"></el-input>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="confirmrej">确定</el-button>
    <el-button @click="dialogVisible = false">取消</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableDate: [],
            tableData1: [],
            //当前页码显示为1
            currentPage: 1,
            currentPage1: 1,
            pageSize1: 5,
            pageSize: 5,
            total: 1,
            total1: 1,
            dialogVisible: false,
            dialogVisible1: false,
            form: [],


        },
        created() {
            this.inittable();
        },
        methods: {
            //初始化盘点
            inittable() {
                axios.post("/inventory/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    this.tableDate = resp.data.data.list
                    this.total = resp.data.data.total
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },

            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            //    改变页面大小的函数
            handleSizeChange1(val) {
                this.pageSize = val;
                this.inittable();
            },

            //    改变显示页码的函数
            handleCurrentChange1(val) {
                this.currentPage = val;
                this.inittable();
            },
            // 盘点通过按钮
            pass(row) {
                axios.post("/inventory/pass", row).then(resp => {
                    this.inittable()
                    this.$message({
                        message: '审核盘点通过成功',
                        type: 'success'
                    });
                })
            },
            //    盘点驳回按钮
            reject(row) {
                this.dialogVisible = true;
                this.form = row;
            },
            //    驳回理由确定按钮
            confirmrej() {
                if (this.form.remarks === null) {
                    this.$alert('驳回理由不能为空', '驳回盘点', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'warning',
                                message: `取消驳回`
                            });
                        }
                    })
                } else {
                    axios.post("/inventory/reject", this.form).then(resp => {
                        console.log(this.form)
                        this.inittable();
                        this.dialogVisible = false;
                    })
                }
            },
            //详情信息按钮
            code(invenid) {
                this.dialogVisible1 = true;
                axios.post("/inventory/goodslist?currentPage=" + this.currentPage1 + "&pageSize=" + this.pageSize1+"&invenid="+ invenid).then(resp => {
                    this.tableData1 = resp.data.data.list
                    this.total1 = resp.data.data.total
                })
            }
        },
    })
</script>
</html>
